﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s5/s5-bg.jpg');
            background-repeat: no-repeat;
        }
    </style >
    <!--<script src="./assets/echarts.min.js"></script>
    <script src="./assets/jquery.js"></script>-->
</head>
<body>
    <div id="container" style="position: absolute; top: 0px; left: 0px;  width:1920px; height:1080px;"></div>
    <script type="text/javascript" src="assets/jquery.js"></script>
    <script type="text/javascript" src="assets/echarts.min.js"></script>
    <script type="text/javascript" src="assets/dataTool.min.js"></script>
    <script type="text/javascript" src="assets/world.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.remote.js"></script>
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        app.title = '65k+ 飞机航线';

        myChart.showLoading();

        $.get('http://172.30.13.36:8080/data/flights.json', function (data) {
            $.get('http://172.30.13.36:8080/data/les-miserables.gexf.xml', function (xml) {
                myChart.hideLoading();

                function getAirportCoord(idx) {
                    return [data.airports[idx][3], data.airports[idx][4]];
                }
                var routes = data.routes.map(function (airline) {
                    return [
                        getAirportCoord(airline[1]),
                        getAirportCoord(airline[2])
                    ];
                });

                var graph = echarts.dataTool.gexf.parse(xml);
                var categories = [];
                for (var i = 0; i < 9; i++) {
                    categories[i] = {
                        name: '类目' + i
                    };
                }
                graph.nodes.forEach(function (node) {
                    node.value = node.symbolSize;
                    node.symbolSize /= 1.5;
                    node.label = {
                        normal: {
                            show: false//node.symbolSize > 10
                        }
                    };
                    node.category = node.attributes.modularity_class;
                });

                myChart.setOption(option = {
                    title: [{
                        text: '项目详情',
                        x: 85,
                        y: 600,
                        textAlign: 'left',
                        textStyle: {
                            color: 'white',
                            fontSize:24
                        }
                    }],
                    //backgroundColor: '#003',
                    tooltip: {
                        formatter: function (param) {
                            var route = data.routes[param.dataIndex];
                            return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
                        }
                    },
                    geo: {
                        map: 'world',
                        left: 100,
                        top: 200,
                        right: 100,
                        bottom: 100,
                        silent: true,
                        itemStyle: {
                            normal: {
                                borderColor: '#003',
                                color: 'rgb(105,182,223)'
                            }
                        }
                    },
                    series: [{
                        type: 'lines',
                        coordinateSystem: 'geo',
                        data: routes,
                        large: true,
                        largeThreshold: 100,
                        lineStyle: {
                            normal: {
                                opacity: 0.05,
                                width: 0.5,
                                curveness: 0.3
                            }
                        },
                        // 设置混合模式为叠加
                        blendMode: 'lighter'
                    }, {
                        name: 'Les Miserables',
                        type: 'graph',
                        layout: 'circular',
                        left: 50,
                        top: 680,
                        //width: 450,
                        height: 300,
                        circular: {
                            rotateLabel: true
                        },
                        data: graph.nodes,
                        links: graph.links,
                        categories: categories,
                        roam: true,
                        label: {
                            normal: {
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: 'source',
                                curveness: 0.3
                            }
                        }
                    }]
                });
            }, 'xml');
        }, 'json');
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
    <!--<script>
        $(document).ready(function () {
            register();
        });
    </script>-->
</body>
</html>